<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="vr_header">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link th:href="@{/static/icon/cake1.png}" rel="shortcut icon"/><!-- 自定义页签图标 -->
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/carousel/">

    <title>Carousel Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/examples/carousel/carousel.css" rel="stylesheet">
    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/js/jquery.cookie.js}"></script>
    <script th:src="@{/static/js/jquery.form.js}"></script>
    <script th:src="@{/static/js/jquery.enplaceholder.js}"></script>
</head>
<!-- ================================= 导航栏 ====================================== -->
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" style="color: lightpink">蛋挞的主页</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a class="glyphicon glyphicon-play" href="javascript:void(0);" onclick="showVideo()">观看视频</a></li>
                        <li><a class="glyphicon glyphicon-headphones" href="javascript:void(0);" onclick="showMisic()">播放音乐</a></li>
                        <li><a class="glyphicon glyphicon-off" href="javascript:void(0);" onclick="logOut()">退出主页</a></li>
                    </ul>
                </div>
            </div>
            <div id="note" data-toggle="tooltip" data-placement="top"/>
        </nav>
        <script th:src="@{/static/js/ckplayer.js}"></script>
        <script type="text/javascript">
            /** ---- 视频加载方法 ---- */
            function showVideo() {
                $.ajax({
                    type: "POST"
                    , url: "/DMIL/personal/getFileList"
                    , data: {}
                    , contentType: "application/x-www-form-urlencoded;charset=utf-8;"
                    , dataType: "json"
                    , async: false
                    , cache: false
                    , success: function (data) {
                        if (data.obj1 == 'success') {
                            $("#video").removeClass("hidden");
                            $("#imageinfo").addClass("hidden");
                            var url = "/DMIL/file/downFile?id=" + data.videolist[0].id;
                            var videoObject = {
                                container: '#video',//“#”代表容器的ID，“.”或“”代表容器的class
                                variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
                                flashplayer: false,//如果强制使用flashplayer则设置成true
                                allowFullScreen: true,//是否支持全屏
                                schedule: 1,//进度条设置：0=不启用，1=启用，2=只能前进（向右拖动），3=只能后退，4=只能前进但能回到第一次拖动时的位置，5=看过的地方可以随意拖动
                                video: {
                                    file: url,//视频地址
                                    type: 'video/mp4'
                                }
                            };
                            player = new ckplayer(videoObject);
                            playerflag = true;
                            $('#fileDialog').modal('show');

                            //手机看不了
                            if (isPhone()) {
                                showPopover($('#note'), "现在视频只能在电脑上看呢！")
                            }
                        }
                    }
                    , error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //alert(XMLHttpRequest.status + textStatus);
                    }
                });
            }

            /*关闭文件*/
            function closepicture() {
                $('#fileDialog').modal('hide');
                //暂停播放视频
                if (playerflag) {
                    player.videoPause();
                }
            }

            /** ---- 音乐加载方法 ---- */
            function showMisic() {
                $.ajax({
                    type: "POST"
                    , url: "/DMIL/personal/getFileList"
                    , data: {}
                    , contentType: "application/x-www-form-urlencoded;charset=utf-8;"
                    , dataType: "json"
                    , async: false
                    , cache: false
                    , success: function (data) {
                        if (data.obj1 == 'success') {
                            var url = "/DMIL/file/downFile?id=" + data.musiclist[0].id;
                            $("#music").attr("src", url);

                            //手机看不了
                            if (isPhone()) {
                                showPopover($('#note'), "已经在放了，但是要用电脑才听得到哦！")
                            }
                        }
                    }
                    , error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //alert(XMLHttpRequest.status + textStatus);
                    }
                });
            }

            //提示弹窗
            function showPopover(target, msg) {
                target.attr("data-original-title", msg);
                $('[data-toggle="tooltip"]').tooltip();
                target.tooltip('show');
                target.focus();
                //2秒后消失提示框
                var id = setTimeout(
                    function () {
                        target.attr("data-original-title", "");
                        target.tooltip('hide');
                    }, 3000
                );
            }

            //判断是否移动端
            function isPhone() {
                //平台、设备和操作系统
                var system = {
                    win: false,
                    mac: false,
                    xll: false
                };
                //检测平台
                var p = navigator.platform;
                system.win = p.indexOf("Win") == 0;
                system.mac = p.indexOf("Mac") == 0;
                system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
                //跳转语句
                if (system.win || system.mac || system.xll) {//pc端 转向后台登陆页面
                    return false;
                } else {
                    return true;//手机端页面
                }
            }

            //退出主页
            function logOut() {
                if (confirm("你要退出主页吗？")) {
                    location.href="/DMIL/personal/passout";
                }
            }
        </script>
    </div>
</div>

<!-- ======================== 文件展示框 ====================== -->
<div class="modal fade" id="fileDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static">
    <div class="modal-dialog" id="filemodel">
        <div class="modal-content center-block" style="width: 350px;">
            <div class="modal-header">
                <div class="pull-right">
                    <div class="btn-group">
                        <button type="button" class="btn btn-danger" onclick="closepicture()">X</button>
                    </div>
                </div>
                <h4 class="modal-title">生日快乐</h4>
            </div>
            <form class="form-horizontal" id="msgpost" name="msgpost" role="form" method="post"
                  enctype="multipart/form-data">
                <div id="imageinfo" class="modal-body" style="text-align: center">
                    <img id="picture" style="width: 90%; padding-bottom: 10%"/>
                </div>
                <div id="video" style="width:100%;height:100%;"></div>
                <!-- 4:3 aspect ratio -->
                <audio id="music" src="" autoplay loop></audio>

            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="closepicture()">返回</button>
            </div>
        </div>
    </div>
</div>

<!-- ======================================== 轮播图 ============================================= -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol id="touch" class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item next left">
            <img id="wall1" class="first-slide" src="" alt="First slide">
        </div>
        <div class="item">
            <img id="wall2" class="second-slide" src="" alt="Second slide">
        </div>
        <div class="item active left">
            <img id="wall3" class="third-slide" src="" alt="Third slide">
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div><!-- /.carousel -->
<script type="text/javascript">
    $(document).ready(function () {
        initWall();
    });
    function initWall(){
        $.ajax({
            type: "POST"
            , url: "/DMIL/personal/getFileList"
            , data: {}
            , contentType: "application/x-www-form-urlencoded;charset=utf-8;"
            , dataType: "json"
            , async: true
            , cache: false
            , success: function (data) {
                if (data.obj1 == 'success') {
                    if (data.walllist.length > 2) {
                        $("#wall1").attr('src',"/DMIL/file/downFile?id=" + data.walllist[0].id);
                        $("#wall2").attr('src',"/DMIL/file/downFile?id=" + data.walllist[1].id);
                        $("#wall3").attr('src',"/DMIL/file/downFile?id=" + data.walllist[2].id);
                    }
                }
            }
            , error: function (XMLHttpRequest, textStatus, errorThrown) {
                //alert(XMLHttpRequest.status + textStatus);
            }
        });
    }
</script>


<!-- ============================================ 海报详情 ================================================ -->
    <!-- START 海报详情 -->
<div id="page">

</div>
<script type="text/javascript">
    $(document).ready(function () {
        initPage();
    });

    function initPage() {
        $.ajax({
            type: "POST"
            , url: "/DMIL/personal/getFileList"
            , data: {}
            , contentType: "application/x-www-form-urlencoded;charset=utf-8;"
            , dataType: "json"
            , async: true
            , cache: false
            , success: function (data) {
                if (data.obj1 == 'success') {
                    var page = ""
                    for (var i = 0; i < data.pagelist.length; i++) {
                        page += '<hr class="featurette-divider">';

                        page += '<div class="row featurette">';
                        page += '   <div class="col-md-7">';
                        page += '       <h2 class="featurette-heading">'+ data.pagelist[i].remark +'</h2>';
                        page += '       <p class="lead">'+ data.pagelist[i].fitmodel +'</p>';
                        page += '   </div>';
                        page += '</div>';
                        page += '<div class="col-md-5">';
                        page += '   <img src="/DMIL/file/downFile?id='+ data.pagelist[i].id +'" class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="500x500" data-holder-rendered="true">';
                        page += '</div>';
                        page += '<div class="pull-right" style="padding-top: 10px;padding-right: 15px;>';
                        page += '   <div class="btn-group">';
                        page += '       <label >你爱了我<a style="color: red" id="count'+ data.pagelist[i].id +'">'+ data.pagelist[i].downstatus +'</a>次</label>';
                        page += '       <button type="button" class="btn-xs btn-info" onclick="addLove('+ data.pagelist[i].id +')">爱你+1</button>';
                        page += '   </div>';
                        page += '</div>';
                    }
                    $("#page").html(page)
                }
            }
            , error: function (XMLHttpRequest, textStatus, errorThrown) {
                //alert(XMLHttpRequest.status + textStatus);
            }
        });
    }

    function addLove(id) {
        $.ajax({
            type: "POST"
            , url: "/DMIL/personal/addLove"
            , data: {id: id }
            , contentType: "application/x-www-form-urlencoded;charset=utf-8;"
            , dataType: "json"
            , async: true
            , cache: false
            , success: function (data) {
                if (data.obj1 == 'success') {
                    $("#count" + id).text(data.count);
                }
            }
            , error: function (XMLHttpRequest, textStatus, errorThrown) {
                //alert(XMLHttpRequest.status + textStatus);
            }
        });
    }
</script>
<!-- /END 海报详情 -->


<!-- FOOTER -->
<hr class="featurette-divider">

<footer>
    <p class="pull-right"><a href="#">Back to top</a></p>
    <p>© 2021-9-8, 作者：告白豆浆 · </p>
</footer>


</div><!-- /.container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie10-viewport-bug-workaround.js"></script>


<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" preserveAspectRatio="none" style="display: none; visibility: hidden; position: absolute; top: -100%; left: -100%;"><defs><style type="text/css"></style></defs><text x="0" y="25" style="font-weight:bold;font-size:25pt;font-family:Arial, Helvetica, Open Sans, sans-serif">500x500</text></svg></body></html>